<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleCreate"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
        </el-col>
        <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
      </el-row>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="products" element-loading-text="正在查询中。。。" border highlight-current-row row-key="id">
      <el-table-column align="center" label="商品兑换编号" prop="id"/>
      <el-table-column align="center" label="商品名" prop="name"/>
      <el-table-column align="center" label="所需积分" prop="points"/>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'GrouponRule',
  data() {
    return {
      showSearch: true,
      listLoading: true,
      products: []
    };
  },
  created() {
    this.getProductList();
  },
  methods: {
    handleCreate() {
      // 新增商品的逻辑
      console.log('新增商品');
    },
    handleDelete(row) {
      // 删除商品的逻辑
      console.log('删除商品', row);
    },
    getProductList() {
      // 模拟从后端获取数据
      this.listLoading = true;
      // 模拟 API 延迟
      setTimeout(() => {
        const mockProducts = [
          { id: 1, name: '商品1', points: 100 },
          { id: 2, name: '商品2', points: 200 },
          { id: 3, name: '商品3', points: 300 },
          // 添加更多模拟数据
        ];
        this.products = mockProducts;
        this.listLoading = false;
      }, 1000);
    }
  }
};
</script>
